<template>
  <div>
    <el-collapse-transition>
      <div class="bossBox flex-column" v-show="isPass">
        <div class="bodyBox flex-column white">
          <H1 style="text-align: center;color:rgba( 255, 255, 255, 0.55 );text-shadow:#03f6ba 2px 1px;">企业人事管理系统</H1>
          <div class="white inputBox">
            <el-input class="el-input" type="text" placeholder="登录ID" v-model="peopleID"/>
          </div>
          <div class="white inputBox">
            <el-input @keydown.enter="logIn" class="el-input" type="text" placeholder="密码" v-model="code"/>
          </div>
          <el-button @click="logIn" class="el-button">登录</el-button>
        </div>
      </div>

    </el-collapse-transition>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
    <span>密码错误,重新输入</span>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
    </el-dialog>
  </div>

</template>

<script>

import {HttpManager} from "@/api";

export default {
  name: "ManLog",
  data() {
    return {
      peopleID: '',
      code: '',
      isPass: true,
      dialogVisible: false
    }
  },
  methods: {
    logIn() {
      if(this.peopleID === ''||this.code === ''){
        this.dialogVisible = true
        return false
      }
      let pass = new URLSearchParams()
      pass.append('peopleID',this.peopleID)
      HttpManager.logIn(pass).then(
          (response)=>{
            if(response === this.code){
              this.isPass = false
            }else {
              this.dialogVisible = true
            }
          }
      )
    },
    handleClose(done) {
      this.$confirm('密码错误,重新输入')
          .then(_ => {
            done(_);
          })
          .catch(_ => {_});
    }
  }
}
</script>

<style scoped>
.bossBox{
  background-image: url("../assets/86cf69b5379ac8785798a2de71048a30.jpeg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
}
.bodyBox{
  width: 30%;
  height: 50%;
  background: rgba( 255, 255, 255, 0.55 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 5px );
  -webkit-backdrop-filter: blur( 5px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  align-items: center;
}
.inputBox{
  width: 80%;
  margin-top: 30px;
  border-radius: 8px;
}
.el-button{
  width: 30%;
  margin-top:50px;
  font-size: 20px;
  background: #02597e;
  color: #fcfcfc;
  text-shadow: #000000 1px 1px;
}
</style>
